<template>
  <div class="recommend">
      <!-- <Scroll :scrollX="true" class="list">
          <div class="scroll-content">
            <div class="recommend-item" v-for="(item, index) in recommendList" :key="index" @click.prevent="geDetail(item.id)">
                <img class="imgs" :src="item.cover_url">
                <span class="text">{{item.title}}</span>
            </div>
          </div>
      </Scroll> -->
       <Scroll :scrollX="true" class="list">
          <div class="scroll-content">
            <div class="recommend-item" v-for="(item, index) in emojis" :key="index" @click.prevent="geDetail(item.id)">
                <!-- <img class="imgs" :src="item.cover_url"> -->
                <span class="text">{{item}}</span>
            </div>
          </div>
      </Scroll>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
export default {
    data() {
        return {
            emojis: [
          '👉🏼 😁 😂 🤣 👈🏼',
          '😄 😅 😆 😉 😊',
          '😫 😴 😌 😛 😜',
          '👆🏻 😒 😓 😔 👇🏻',
          '😑 😶 🙄 😏 😣',
          '😞 😟 😤 😢 😭',
          '🤑 😲 ☹️ 🙁 😖',
          '👍 👎 👊 ✊ 🤛',
          '☝️ ✋ 🤚 🖐 🖖',
          '👍🏼 👎🏼 👊🏼 ✊🏼 🤛🏼',
          '☝🏽 ✋🏽 🤚🏽 🖐🏽 🖖🏽',
          '🌖 🌗 🌘 🌑 🌒'
        ]
        }
    },
    props: {
        recommendList: {
            type: Array,
            defult() {
                return []
            }
        }
    },
    setup() {
        const route = useRouter()
        function geDetail(id) {
            route.push({
                path: '/detail',
                query: { id }
            })
        }
        return {
            geDetail
        }
    }
}
</script>

<style lang="scss" scoped>
.recommend {
    .list {
        position: relative;
        height: 135px;
        padding: 15px;
        border-bottom: 8px solid #eee;
        overflow: hidden;
        box-sizing: border-box;
        // width: 100%;
        .scroll-content {
            display: flex;
            .recommend-item {
                width: 80px;
                height: 100px;
                display: flex;
                flex-direction: column;
                flex-shrink: 0;
                align-items: center;
                box-sizing: border-box;
                .imgs {
                    width: 70px;
                    height: 70px;
                }
                .text {
                    margin-top: 5px;
                    text-align: center;
                }
            }
            
        }
    }
}
</style>